import React, { useEffect, useState } from "react"
import { Outlet, useLocation, NavLink, useNavigate } from "react-router-dom"
import './l-r-slide.css'
//
import banner from '../assets/u=270711349,2152740631&fm=253&fmt=auto&app=138&f=JPEG.webp'


export default (props) => {

    const navigate = useNavigate()

    // # data

    const [load, setLoad] = useState(0)
    const [flags, setFlags] = useState(1)
    const [showleft, setShowleft] = useState(1)
    const [showright, setShowright] = useState(1)
    const [headshow, setHeadshow] = useState(props.head || 1)//0为隐藏，1为显示，props.head接收，head属性传进来

    // # methods

    const ifshowleftorright = () => {
        if (document.getElementById('wraps' + (props.id || '')).scrollLeft > 0) {
            setShowleft(() => 1)
        } else {
            setShowleft(() => 0)
        }
        var domleft = document.getElementById('wrapsin' + (props.id || '')).getBoundingClientRect().left - document.getElementById('wraps' + (props.id || '')).getBoundingClientRect().left
        var slideitemlength = 0
        for (var i = 0; i < document.querySelectorAll('.slideitem' + (props.id || '')).length; i++) {
            slideitemlength += document.querySelectorAll('.slideitem' + (props.id || ''))[i].getBoundingClientRect().width
        }
        if (Math.floor(slideitemlength - document.getElementById('wraps' + (props.id || '')).getBoundingClientRect().width) > Math.floor(-domleft)) {
            setShowright(() => 1)
        } else {
            setShowright(() => 0)
        }
    }

    const toleft = () => {
        if (flags == 0) {
            return
        }
        setFlags(() => 0)
        var scrollLeft = document.getElementById('wraps' + (props.id || '')).scrollLeft -
            document.getElementById('wraps' + (props.id || '')).getBoundingClientRect().width
        var flag = 0
        var fn = () => {
            document.getElementById('wraps' + (props.id || '')).scrollTo(
                document.getElementById('wraps' + (props.id || '')).scrollLeft -
                document.getElementById('wraps' + (props.id || '')).getBoundingClientRect().width * 0.02,
                0)
            setTimeout(() => {
                if (scrollLeft < document.getElementById('wraps' + (props.id || '')).scrollLeft && flag == 0) {
                    fn()
                }
            }, 0)
        }
        fn()
        setTimeout(() => {
            flag = 1
            setFlags(() => 1)
            //响应处理部分，正文和导航一起改变尺寸的时候也要处理的部分
            ifshowleftorright()
        }, 300);
    }

    const toright = () => {
        if (flags == 0) {
            return
        }
        setFlags(() => 0)
        var scrollLeft = document.getElementById('wraps' + (props.id || '')).scrollLeft +
            document.getElementById('wraps' + (props.id || '')).getBoundingClientRect().width
        var flag = 0
        var fn = () => {
            document.getElementById('wraps' + (props.id || '')).scrollTo(
                document.getElementById('wraps' + (props.id || '')).scrollLeft +
                document.getElementById('wraps' + (props.id || '')).getBoundingClientRect().width * 0.02,
                0)
            setTimeout(() => {
                if (scrollLeft > document.getElementById('wraps' + (props.id || '')).scrollLeft && flag == 0) {
                    fn()
                }
            }, 0)
        }
        fn()
        setTimeout(() => {
            flag = 1
            setFlags(() => 1)
            //响应处理部分，正文和导航一起改变尺寸的时候也要处理的部分
            ifshowleftorright()
        }, 300);
    }

    //

    const tosetdom = () => {
        //响应处理部分，正文和导航一起改变尺寸的时候也要处理的部分
        ifshowleftorright()
    }

    const setdom = () => {
        tosetdom()
        window.addEventListener('resize', () => {
            if (document.getElementById('wraps' + (props.id || '')) && document.getElementById('wrapsin' + (props.id || ''))) {
                tosetdom()
            }
        })
    }

    //

    const tolinkR = (e, v) => {
        navigate(v ? '/other_page/videodetail?id=' + v : '/other_page/videodetail')
    }

    // # mounted

    const mounted = () => {
        if (load == 0) {
            setLoad(() => 1)
            //
            setTimeout(() => {
                setdom()
            }, 10)
        }
    }

    // # update

    const updates = () => {
        showleft
    }

    // # destroyed

    const destroyeds = () => {
        if (React.updateobj.updates == 1) {
            setTimeout(() => {
                React.updateobj.updates = 0
            })
        } else {
            //这里是页面销毁的逻辑
        }
    }

    useEffect(() => {

        //# mounted

        mounted()

        //# update

        updates()

        //# destroyed

        return destroyeds

    }, [])

    return (
        <div>
            <div style={{ position: 'relative' }}>

                <div style={{ display: showleft ? "" : 'none', position: 'absolute', left: 0, top: 70, padding: '15px 0', width: 50, color: 'white', backgroundColor: 'rgba(0,0,0,.5)', textAlign: 'center', fontSize: 20, zIndex: 2 }} onClick={() => toleft()}>{'<'}</div>

                <div style={{ overflow: 'auto hidden' }} className="wraps" id={"wraps" + (props.id || '')} onScroll={() => ifshowleftorright()}>
                    <div id={"wrapsin" + (props.id || '')} style={{ whiteSpace: 'nowrap', fontSize: 0 }}>
                        {[1, 2, 3, 4, 5, 6, 7].map((v, i) => {
                            return (
                                <div className={"slideitem slideitem" + (props.id || '')} key={i} onClick={(e) => tolinkR(e, v)}>
                                    <div style={{ marginRight: 20, backgroundColor: '#fff' }}>

                                        <div style={{ position: 'relative', height: 200, backgroundColor: '#ccc', overflow: 'hidden' }}>
                                            <img style={{ width: '100%', height: '100%' }} src={banner} alt="" />
                                            <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,.5)' }}>
                                                <div style={{ position: 'absolute', top: 30, left: '10%', color: 'white', fontSize: 30, fontWeight: 800 }} className="leftin">Villiage road</div>
                                                <div style={{ position: 'absolute', bottom: 30, right: '10%', color: 'white', fontSize: 20 }} className="rightin">get your relax life now</div>
                                            </div>
                                        </div>

                                        <div style={{ overflow: "hidden" }}>
                                            <div style={{ margin: '10px 10px 0px 10px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: 19 }}>{(v == 1 || v == 2) ? '(普通)' : '(影视)'}1231231312312312312312312312313123123123123123</div>
                                            <div style={{ margin: '10px 10px 0px 10px', paddingBottom: 20, fontSize: 12, whiteSpace: 'nowrap', overflow: "hidden" }}>
                                                <div style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>2020-10-10</div>
                                            </div>
                                            <div style={{ display: headshow == 1 ? '' : 'none', margin: '10px 10px 0px 10px', paddingBottom: 20, fontSize: 12, whiteSpace: 'nowrap', overflow: "hidden" }}>
                                                <div style={{ display: 'inline-block', marginRight: 10, width: 20, height: 20, backgroundColor: '#ccc', borderRadius: '50%', verticalAlign: 'middle' }}></div>
                                                <div style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>用户名xxx</div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>

                <div style={{ display: showright ? "" : 'none', position: 'absolute', right: 0, top: 70, padding: '15px 0', width: 50, color: 'white', backgroundColor: 'rgba(0,0,0,.5)', textAlign: 'center', fontSize: 20, zIndex: 2 }} onClick={() => toright()}>{'>'}</div>

            </div>
        </div >
    )
}